<template>
    <card>
        <p slot="title">
            <Icon type="compose"></Icon>
            用户信息
        </p>
        <Form ref="formItem" :model="formItem" :rules="ruleForm" label-width="120">
            <Row type="flex">
                <Col :span="6">
                    <FormItem label="用户名：" prop="username">
                        <Input v-model="formItem.username" size="large" placeholder="请填写内容"/>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="登录用户名：" prop="userLoginName">
                        <Input v-model="formItem.userLoginName" size="large" placeholder="请填写内容"/>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="密码：" prop="password">
                        <Input v-model="formItem.password" size="large" type="password" placeholder="请填写内容">
                            <Icon type="locked" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="再次输入密码：" prop="rpassword">
                        <Input v-model="formItem.rpassword" size="large" type="password" placeholder="请填写内容">
                            <Icon type="locked" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex">
                <Col :span="6">
                    <FormItem label="岗位：" prop="job">
                        <Select size="large" v-model="formItem.job" filterable @on-change="changeJob">
                            <Option value="1" key="1">医生</Option>
                            <Option value="2" key="2">护士</Option>
                            <Option value="3" key="3">网电</Option>
                            <Option value="4" key="4">客服</Option>
                            <Option value="5" key="5">现场</Option>
                            <Option value="6" key="6">财务</Option>
                            <Option value="7" key="7">前台</Option>
                            <Option value="8" key="8">后勤</Option>
                            <Option value="9" key="9">主管</Option>
                            <Option value="10" key="10">总经理</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="部门：">
                        <Select size="large" v-model="formItem.departmentId" filterable :label-in-value=true @on-change="changeDepartment">
                            <Option v-for="item in departments" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="后勤：">
                        <Checkbox true-value="1" false-value="0" v-model="formItem.isLogistics"></Checkbox>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="专家：">
                        <Checkbox true-value="1" false-value="0" v-model="formItem.isExpert"></Checkbox>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex">
                <Col :span="24">
                    <FormItem>
                        <Button @click="save" type="primary">保存</Button>
                        <Button @click="close" type="ghost" style="margin-left: 8px">关闭</Button>
                    </FormItem>
                </Col>
                <Col :span="5">&nbsp;</Col>
                <Col :span="5">&nbsp;</Col>
                <Col :span="5">&nbsp;</Col>
            </Row>
        </Form>
    </card>
</template>

<script>
export default {
    data () {
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formItem.password) {
                callback(new Error('两次输入的密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            baseURL: '/user',
            readonly: false,
            formItem: {
                username: '',
                userLoginName: '',
                password: '',
                rpassword: '',
                job: '',
                isLogistics: '',
                isExpert: '',
                departmentId: '',
                departmentName: ''
            },
            ruleForm: {
                username: [
                    { required: true, message: '请填写用户名', trigger: 'change' }
                ],
                userLoginName: [
                    { required: true, message: '请填写登录用户名', trigger: 'change' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'change' }
                ],
                rpassword: [
                    { validator: validatePassCheck, trigger: 'change' }
                ],
                job: [
                    { required: true, message: '请选择岗位', trigger: 'change' }
                ]
            },
            departments: []
        }
    },
    methods: {
        loadDepartment () {
            let url = '/user/department/findAll'
            this.$ajax.get(url).then(r => {
                let {code, data, msg} = r.data
                if (code === 0) {
                    this.departments = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        changeJob (value) {
            if (value && value !== '') {
                this.formItem.job = value + ''
            }
        },
        changeDepartment (option) {
            this.formItem.departmentId = option.value
            this.formItem.departmentName = option.label
        },
        init () {
            // 加载部门
            this.loadDepartment()
            this.resetForm()
            this.$bus.fillData(this.formItem, this.$route.query.row)
            if (this.$route.query.row) {
                let row = this.$route.query.row
                this.formItem.rpassword = row.password
                this.formItem.job = row.job + ''
                // this.formItem.departmentId = parseInt(row.departmentId)
                this.formItem.isLogistics = row.isLogistics + ''
                this.formItem.isExpert = row.isExpert + ''
                this.readonly = true
            }
        },
        save () {
            this.$refs['formItem'].validate((valid) => {
                if (valid) {
                    let url = this.baseURL + '/saveOrUpdate'
                    this.$ajax.post(url, this.formItem).then((response) => {
                        let {code} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', '操作成功')
                            this.$bus.init(this.formItem)
                            this.resetForm()
                        }
                    })
                }
            })
        },
        resetForm () {
            this.$refs.formItem.resetFields()
        },
        close () {
            this.$bus.closePageToLink()
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init()
        })
    }
}
</script>

<style>

</style>
